<template>
  <view class="my-userinfo">
    <view class="top-box">
      <image :src="userinfo.avatarUrl" class="avater"></image>
      <view class="nikename">
        {{userinfo.nickName}}
      </view>
    </view>
  <!-- 面板区域 -->
  <view class="panal-list">
    <!-- 第一个面板 -->
    <view class="panel1">
        <view class="panel1-item" @click="witeToDev">
          <text>8</text>
          <text>收藏的店铺</text>
        </view>
        <view class="panel1-item" @click="gotoStar">
          <text>{{star.length}}</text>
          <text>收藏的商品</text>
        </view>
        <view class="panel1-item" @click="witeToDev">
          <text>14</text>
          <text>关注的商品</text>
        </view>
        <view class="panel1-item" @click="witeToDev">
          <text>88</text>
          <text>足迹</text>
      </view>
    </view>
    <!-- 第二个面板 -->
    <view class="panel2">
      <view class="title">
        我的订单
      </view>
      <view class="panel2-body" @click="witeToDev">
      <view class="panel2-item">
        <image src="../../static/my-icons/icon1.png" mode=""></image>
        <text>待付款</text>
      </view>
      <view class="panel2-item">
        <image src="../../static/my-icons/icon2.png" mode=""></image>
        <text>待收货</text>
      </view>
      <view class="panel2-item">
        <image src="../../static/my-icons/icon3.png" mode=""></image>
        <text>退款/退货</text>
      </view>
      <view class="panel2-item">
        <image src="../../static/my-icons/icon4.png" mode=""></image>
        <text>全部订单</text>
      </view>
          </view>
    </view>
    <!-- 第三个面板 -->
    <view class="panel3">
     <view class="panel3-item" @click="chooseaddress">
       <text>收货地址</text>
       <uni-icons type="arrowright"></uni-icons>
     </view>
     <view class="panel3-item" @click="witeToDev">
       <text>联系客服</text>
       <uni-icons type="arrowright"></uni-icons>
     </view>
     <view class="panel3-item" @click="logout">
       <text>退出登录</text>
       <uni-icons type="arrowright"></uni-icons>
     </view>
    </view>
  </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapGetters,
    mapMutations
  } from "vuex"
  export default {
    name: "my-userinfo",
    computed: {
      ...mapState("m_user", ['userinfo']),
      ...mapState("m_star", ['star']),
      ...mapGetters('m_cart', ['getcheckednum', 'total'])
    },
    data() {
      return {

      };
    },
    methods: {
      ...mapMutations('m_user', ['updateAddress', 'updateUserinfo','updateToken']),
      witeToDev(){
        uni.$showMsg('该功能待开发...敬请期待(=^_^=)')
      },
      gotoStar() {
        uni.navigateTo({
          url: "../../subpkg/goods_star/goods_star"
        })
      },
      async chooseaddress() {
        const [err, succ] = await uni.chooseAddress().catch(err => err)
        if (err == null && succ.errMsg == 'chooseAddress:ok') {
          this.updateAddress(succ)
        }
      },
     async logout(){
        const [err,succ]=await uni.showModal({
          title:"提示",
          content:'确认退出登录吗？'
        }).catch(err=>err)
        if(succ&& succ.confirm){
          this.updateAddress({}),
          this.updateUserinfo({}),
          this.updateToken('')
        }
      }
    }
  }
</script>

<style lang="scss">
  page,.my-userinfo {
    height: 100%;
    background-color: #f4f4f4;
    .top-box {
      height: 400rpx;
      background-color: #c00000;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .avater {
        width: 90px;
        height: 90px;
        border-radius: 45px;
        margin: 10px 0;
        border: 2px solid #fff;
        box-shadow: 0px 1px 5px #fff;
      }
      .nikename {
        color:#fff;
        font-size: 16px;
        font-weight: bold;
        font-family: "宋体"; 
      }
    }
  }
  
  .panal-list{
    // display: flex;
    // justify-content: center;
    margin: 0 auto;
    width: 90%;
    transform: translateY(-10px);
    .panel1{
      display: flex;
      justify-content: space-around;
      background-color: #fff;
      font-size: 13px;
      border-radius: 5px;
      padding: 10px 0;
      margin-bottom: 8px;
      .panel1-item{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }
    .panel2{
      width: 100%;
      background-color: #fff;
      font-size: 13px;
      border-radius: 5px;
      margin-bottom: 8px;
      .title{
        font-size: 14px;
        padding: 12px 0 12px 8px;
      }
      .panel2-body{
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 5px 0 12px 0;
        border-top: 1px solid #eee;
        .panel2-item{
          display: flex;
          flex-direction: column;
          justify-content: start;
          align-items: center;
          image{
            width: 45px;
            height: 45px;
          }
        }
      }
    }
    .panel3{
      background-color: #fff;
      border-radius: 5px;
      padding: 0 7px;
      .panel3-item{
        line-height: 50px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
</style>
